<template>
  <view class="tt">
    <scroll-view class="scroll-view" refresher-enabled scroll-y :refresher-triggered="isTriggered" @scrolltolower="onScrollToLower" @refresherrefresh="onScrollViewRefresh">
      <view class="content">
        <view class="container">
          <uni-card v-for="notify in filteredList" :key="notify.id" :border="false" :is-shadow="false">
            <view class="order">
              <view class="itemm">{{ notify.title }}</view>
              <text class="state">{{ getStatusText(notify.status) }}</text>
            </view>
            <view class="time">订单号: {{ notify.id }}</view>
            <view class="time">类型: {{ notify.type }}</view>
           <text  selectable="true"  class="time">业务领域: {{ notify.domain }}</text >
           <view   selectable="true" class="time">联系方式: {{ notify.tel }}</view>
            <view class="details">
              <view class="time">创建时间: {{ notify.createdAt }}</view>

              <navigator hover-class="none" class="particulars" :url="`/subpkg_work/SurveyDetails/SurveyDetails?id=${notify.id}`">查看详情</navigator>
            </view>
          </uni-card>
          <view v-if="isEmpty" class="message-blank">暂无消息</view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import taskApi from '@/api/task.js';
import { ref, onMounted, computed } from "vue"

const fromList = ref([])
const nextPage = ref(1)
const isEmpty = ref(false)
const hasMore = ref(true)
const isTriggered = ref(false)
const listData = ref({})
const mobile = ref('')

onMounted(() => {
  fromData()
})

function onScrollToLower() {
  if (!hasMore.value) {
    return uni.utils.toast('没有更多数据了!')
  }
  fromData(nextPage.value)
}

function onScrollViewRefresh() {
  isTriggered.value = true
  fromData()
  isTriggered.value = false
}

async function fromData(currentPage = 1, pageSize = 5 ) {
  const res = await taskApi.sheetList(currentPage, pageSize,mobile.value)
  console.log("渲染数据",res);
  if (res.code !== 200) {
    return uni.utils.toast('获取通知失败，稍后重试!')
  }

  if (res.data.currentPage === 1) {
    fromList.value = []
  }
  fromList.value = [...fromList.value, ...(res.data.data || [])]
  nextPage.value = res.data.currentPage + 1
  hasMore.value = nextPage.value <= res.data.resultCount
  isEmpty.value = fromList.value.length === 0
}

const filteredList = computed(() => {
  return fromList.value.filter(notify => notify.status === 1); // 过滤出状态为 3 的数据
});

function getStatusText(status) {
  switch (status) {
    case 0:
      return '待支付'
    case 1:
      return '勘测中'
    case 2:
      return '已勘测'
    case 3:
      return '安装中'
    case 4:
      return '已完成'
    case 5:
      return '已取消'
    case 6:
      return '退款中'
    case 7:
      return '已退款'
    default:
      return ''
  }

}

fromData()
</script>

<style>
	.content {
		height: 100vh;
	background-color:#f5f5f5 ;
	padding-top: 20px;
		height: 100vh;
	}
	.container{
		margin-left: 2%;
	}
	.uni-card{
		border: 1px solid #ffffff;
		margin-left: 30px;
		width: 85%;
		background-color: #ffffff !important;
	}
	.order{
		display: flex;
		justify-content: space-between;
		color: #ffffff;
	}
	.state{
		color: #fe486e;
		padding-bottom: 10px;
	}
	.time{
		color:#7a7b75 ;
		font-size: 12px;
	}

  .itemm{
    color: #000;
  }
	.details{
		display: flex;
		justify-content: space-between;
	}
	.particulars{
		color: #fff;
		width: 100px;
		background-color: #8bc34a;
		text-align: center;
		border-radius: 50px;
		margin-bottom: 10px;
		margin-right: 10px;
	}
	.message-blank{
		width: 100%;
		text-align: center;
		margin-top: 30px;
	}
  .receiving{
    width: 25%;
    height: 10%;
    text-align: center;
    border: 1px solid #e85645;
    color: #fe4833;
    border-radius: 5px;
  }
</style>
